<template>
  <view class="container">

    <view class="btn-box ">
      <button class="btn-primary" hover-class="btn-hover" @tap="rDrawer">从右边弹出</button>
    </view>

    <view class="btn-box ">
      <button class="btn-primary" hover-class="btn-hover" @tap="lDrawer">从左边弹出</button>
    </view>

    <!--左抽屉-->
    <tui-drawer mode="left" :visible="leftDrawer" @close="closeDrawer">
      <view class="d-container">
        <button class="btn-primary" hover-class="btn-hover" @tap="closeDrawer">关闭抽屉</button>
      </view>
    </tui-drawer>

    <!--右抽屉-->
    <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
      <view class="d-container">
        <button class="btn-primary" hover-class="btn-hover" @tap="closeDrawer">关闭抽屉</button>
      </view>
    </tui-drawer>

  </view>
</template>

<script>
  import tuiDrawer from "@/components/drawer/drawer"

  export default {
    components: {
      tuiDrawer
    },



    name: "drawer",
    data() {
      return {
        leftDrawer: false,
        rightDrawer: false
      }
    },
    methods: {
      closeDrawer(e) {
        this.leftDrawer = false;
        this.rightDrawer = false
      },
      rDrawer() {
        this.rightDrawer = true
      },
      lDrawer() {
        this.leftDrawer = true
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "drawer.css";
</style>
